<template>
  <div class="item" @click="clickMusic">
    <slot />
    <div class="pic" v-if="$props.data?.al?.picUrl">
      <el-image class="img" :src="$props.data?.al?.picUrl" fit="cover" lazy>
        <template #placeholder>
          <Loading />
        </template>
      </el-image>
    </div>
    <div class="name">
      <p>{{ props.data.name }}</p>
      ---
      <span v-for="item in props.data?.ar || props.data?.artists" :key="item.id">{{ item.name }} ·</span>
    </div>
    <slot name="check" />
    <div class="about">
      <div class="play" @click.stop="addMusicList">
        <el-icon><Headset /></el-icon>
      </div>
      <!-- <div class="download"><SvgIcon class="btn" name="download" /></div> -->
    </div>
    <Teleport to="body">
      <SvgIcon
        :class="{ active: musicActive }"
        name="home-music"
        class="music-note"
        :style="{ top: musicNotePosition.top + 'px', left: musicNotePosition.left + 'px', display: musicNotePosition.show ? '' : 'none' }"
      />
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from "vue"
import Loading from "@/components/Loading/index.vue"
import { useMusicStore } from "@/store/modules/music"
import { ElMessage } from "element-plus"

const props = defineProps<{
  data: any
  type?: string
}>()

// 音乐仓库
const musicStore = useMusicStore()

// 添加音乐到播放列表
const addMusicList = () => {
  if (!props.type) {
    musicStore.addMusicList(props.data)
  } else {
    musicStore.addMusicListSearch(props.data)
  }
}

// 音乐激活
const musicActive = ref(false)

// 音乐图标位置
const musicNotePosition = ref<any>({ top: 0, left: 0, show: false })

// 点击激活
const clickMusic = (e: any) => {
  musicNotePosition.value = {
    top: e.clientY - 100,
    left: e.clientX - 25
  }
  musicNotePosition.value.show = true

  setTimeout(() => {
    musicActive.value = true
    console.log(musicActive.value)
  }, 100)

  setTimeout(() => {
    musicActive.value = false
    musicNotePosition.value = {
      top: 0,
      left: 0,
      show: false
    }
  }, 600)
}
</script>

<style scoped lang="scss">
.music-note {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  z-index: 999;
  transition: all 0.5s;
  &.active {
    top: 877px !important;
    left: 269px !important;
    z-index: 10000;
  }
}

.item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  transition: all 0.3s ease;
  padding: 16px 20px;
  cursor: pointer;
  border-radius: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  
  &:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: rgba(64, 158, 255, 0.3);
    
    .name p {
      color: #409eff;
    }
    
    .pic {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(64, 158, 255, 0.3);
    }
    
    .about {
      .play {
        transform: scale(1.1);
        background: #409eff;
        color: #fff;
      }
    }
  }
  
  .pic {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-right: 16px;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    .img {
      border-radius: 8px;
      width: 100%;
      height: 100%;
    }
  }
  
  .name {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 20px;
    overflow: hidden;
    
    p {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin: 0;
      margin-right: 12px;
      transition: color 0.3s ease;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    span {
      display: inline-block;
      font-size: 14px;
      color: #909399;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 8px;
      
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .about {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .play {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f7fa;
      color: #606266;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid #e4e7ed;
      
      &:hover {
        background: #409eff;
        color: #fff;
        border-color: #409eff;
        transform: scale(1.1);
      }
      
      .el-icon {
        font-size: 18px;
      }
    }
    
    .download {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f7fa;
      color: #606266;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid #e4e7ed;
      
      &:hover {
        background: #67c23a;
        color: #fff;
        border-color: #67c23a;
        transform: scale(1.1);
      }
    }
  }
  
  .desc {
    flex: 1;
    font-size: 14px;
    color: #909399;
  }
  
  // 序号样式
  .index {
    min-width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-music-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    margin-right: 16px;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  }
}
</style>
